<template>
 <div id="box">
        <!-- 商品开始 -->
       
        <router-link to="#">
          <div id="header">
              <div class="header_content">
                <div class="header_img">
                  <img :src="'http://localhost:3000/images/'+product.heade_img" alt="">
                </div>
                <div class="info">
                  <p>{{product.name}}</p>
                   <div class="test">
                    {{product.personal_profile | ellipsis}}
                  </div>
                </div>
              </div>
              <div class="btn">
                <el-button type="danger" round>关注</el-button>
              </div>
          </div>
        </router-link>
        <div id="content" v-if="product!=''">
          <div class="text">
            <p>{{product.doc.text}}</p>
          </div>
          <div class="demo-image__lazy" v-if="product.doc.imgPath!=0">
            <el-image v-for="(item,index) in product.doc.imgPath" :key="index" :src="'http://drcy.wyx.ac.cn/'+item" lazy></el-image>
            <!-- <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image> -->
          </div>

          <div v-else class="video">
            <video :src="'http://drcy.wyx.ac.cn/'+product.doc.videoPath" controls></video>
          </div>
        </div>

        <!-- 评论 -->
        <!-- <div id="lv-container" data-id="city" data-uid="MTAyMC80NDMzMC8yMDg2Mg=="></div> -->

        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
    <foter></foter>
  </div>
</template>
<style scoped>
    #header{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .5em;
    }
    .header_content{
      display: flex;
    }
    .header_img{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: .5em;
    }
    .header_img>img{
      width: 100%;
    }
    .test{
      color:#968d8d;
      font-size: .8em;
      width: 175px;
    }
    #content{
      padding: .5em;
    }
    .video>video{
      width: 100%;
    }
</style>
<style>
  .el-button--danger{
    color: #FFF;
    background-color: #ff6f6f;
    border-color: #ff6f6f;
  }
  
  .demo-image__lazy{
    height: 500px;
  }
  .el-image{
    width: 100%;
    height: 200px;
    margin-bottom: .5em;
  }
</style>

<script>
import foter from '@/components/footer.vue'
import axios from "axios"
import {createComment} from './../../static/js/pinlun'
export default {
    data(){
        return {
            msg:"",//错误提示
            detail_id:"",
            product:"",
            detail_name:this.$route.query.name
        }
    },
    filters: {
    ellipsis (value) {
        if (!value) return ''
        if (value.length > 8) {
          return value.slice(0,8) + '...'
        }
        return value
      }
    },
    created(){
        this.id()
        this.getDetail()
        this.pinlun()
        
    },
    // mounted(){
    //   this.$nextTick(function () {

    //    var s=document.getElementById("SOHUCS");
    //    console.log(s)
    //    createComment()
    //   })
    // },
    components:{
      foter
    },
    methods:{
       open() {
          this.$message(this.msg);
        },
        id(){
            this.detail_id=this.$route.query.id
        },
        getDetail(){
            axios.get("http://localhost:3000/getDetail",{
                params:{
                    id:this.detail_id,
                    name:this.detail_name
                }
            }).then(res=>{
                const response=res.data;
                if(response.status==200){
                  this.product=response.result
                }else{
                  this.msg=response.result;
                  this.open()
                }
            })
        },
        pinlun(){
           (function(d, s) {
                var j, e = d.getElementsByTagName(s)[0];

                if (typeof LivereTower === 'function') { return; }

                j = d.createElement(s);
                j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                j.async = true;
                e.parentNode.insertBefore(j, e);
            })(document, 'script');
        
        }
    }
}
</script>

